<template>
  <div class="file-list-container">
    <h3>文件列表</h3>
    <div v-if="fileList.length === 0" class="empty-state">暂无文件</div>

    <div class="file-grid">
      <div v-for="file in fileList" :key="file.id" class="file-item">
        <!-- 根据文件类型显示不同图标 -->
        <div :class="['file-icon', getIconClass(file.type)]">
          <i :class="getIconClass(file.type)"></i>
        </div>
        <div class="file-info">
          <div class="file-name" title="点击下载">{{ file.name }}</div>
          <div class="file-meta">
            <span class="file-type">{{ file.type.toUpperCase() }}</span>
            <span class="file-date">{{ formatDate(file.createTime) }}</span>
          </div>
        </div>
        <el-button type="primary" size="small" @click="downloadFile(file)">下载</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: "FileList",
  data() {
    return {
      fileList: []
    };
  },
  created() {
    this.fetchFileList();
  },
  methods: {
    // 获取文件列表
    fetchFileList() {
      axios.get("http://localhost:9300/list", {
        responseType: 'json'
      }).then(response => {
        console.log('原始响应:', response); // 调试用
        this.fileList = response.data;
      });

    },

    // 根据文件类型获取图标类名
    getIconClass(fileType) {
      const iconMap = {
        // 主流图片格式
        jpg: "el-icon-picture",
        jpeg: "el-icon-picture",
        png: "el-icon-picture",
        gif: "el-icon-picture",
        webp: "el-icon-picture",
        tiff: "el-icon-picture",
        bmp: "el-icon-picture",
        ico: "el-icon-picture",
        cur: "el-icon-picture",
        svg: "el-icon-picture",
        ai: "el-icon-picture",
        eps: "el-icon-picture",
        cdr: "el-icon-picture",
        raw: "el-icon-picture",    // 相机原始格式
        nef: "el-icon-picture",    // 尼康相机格式
        cr2: "el-icon-picture",    // 佳能相机格式
        arw: "el-icon-picture",    // 索尼相机格式
        heic: "el-icon-picture",   // 苹果高效图像格式
        heif: "el-icon-picture",
        apng: "el-icon-picture",   // 动画PNG
        psb: "el-icon-picture",    // 大型PSD格式
        dng: "el-icon-picture",    // 数字负片格式
        xcf: "el-icon-picture",    // GIMP格式
        rgba: "el-icon-picture",
        fff: "el-icon-picture",
        doc: "el-icon-document",
        docx: "el-icon-document",
        pdf: "el-icon-document",
        txt: "el-icon-document",
        xls: "el-icon-table",
        xlsx: "el-icon-table",
        ppt: "el-icon-s-office",
        pptx: "el-icon-s-office",
        zip: "el-icon-setting",
        rar: "el-icon-setting",

    };
      return iconMap[fileType] || iconMap.default;
    },

    // 格式化日期
    formatDate(date) {
      if (!date) return "";
      const d = new Date(date);
      return d.toLocaleString();
    },

    // 下载文件
    downloadFile(file) {
      // 注意：这里需要根据实际后端接口调整
      // 假设后端提供了根据URL下载的接口
      const url = `http://localhost:9300/download?path=${encodeURIComponent(file.url)}`;
      const a = document.createElement("a");
      a.href = url;
      a.download = file.name;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  }
};
</script>

<style scoped>
.file-list-container {
  padding: 20px;
}

.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 增加最小列宽 */
  gap: 20px;
  margin-top: 20px;
}

.file-item {
  display: flex;
  flex-direction: column; /* 修改为垂直布局 */
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  transition: all 0.3s;
  height: 100%; /* 确保项目高度一致 */
}

.file-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.file-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin: 0 auto 10px; /* 居中显示图标 */
  font-size: 24px;
  color: #409eff;
}

.file-info {
  flex: 1; /* 保持弹性，但允许内容撑开 */
  margin-bottom: 10px; /* 为按钮留出空间 */
}

.file-name {
  font-size: 14px;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示2行 */
  -webkit-box-orient: vertical;
  cursor: pointer;
  color: #303133;
}

.file-name:hover {
  color: #409eff;
}

.file-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.file-type {
  background-color: #ecf5ff;
  color: #409eff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.file-date {
  flex-shrink: 0;
}

.empty-state {
  padding: 30px;
  text-align: center;
  color: #909399;
  background-color: #f5f7fa;
  border-radius: 6px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .file-grid {
    grid-template-columns: 1fr; /* 小屏幕下单列显示 */
  }
}
</style>
